<template>
  <div class="p-2">
    <div class="viewBox">
      <div class="title-item">
        <span class="line-box"></span><span>{{ title }}</span>
      </div>
      <!-- 添加或修改教学资源管理公有库对话框 -->

      <el-form
        ref="resourcesSchoolFormRef"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="名称" prop="resName">
          <el-input v-model="form.resName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="类型" prop="resType">
          <el-select v-model="form.resType" placeholder="请选择类型">
            <el-option
              v-for="dict in sys_file_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" prop="resDesc">
          <el-input v-model="form.resDesc" placeholder="请输入说明" />
        </el-form-item>
        <el-form-item label="所属地区" prop="areaCode">
          <el-cascader
            clearable
            filterable
            placeholder="省/市/区"
            :options="addRessList"
            :props="cityProps"
            v-model="form.areaCode"
            popper-class="pc-sel-area-cascader"
            @change="areaCodeChange"
          />
        </el-form-item>
        <el-form-item label="学校" prop="deptId">
          <!--<el-tree-select
            clearable
            filterable
            v-model="form.deptId"
            :data="deptOptions"
            :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
            value-key="deptId"
            placeholder="请选择学校"
            :render-after-expand="false"
          /> -->
          <el-select v-model="form.deptId" placeholder="请选择学校" >
            <el-option v-for="item in tenantOptions" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <editor v-model="form.content" :min-height="120" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="附件内容" prop="attach">
          <videoFileUpload v-model="form.attach" v-if="form.resType == '0'" />
          <imageUpload v-model="form.attach" v-if="form.resType == '1'" />
          <fileUpload v-model="form.attach" v-if="form.resType == '2'" />
        </el-form-item>
      </el-form>

      <div class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="ResourcesSchool" lang="ts">
import {
  listResourcesSchool,
  getResourcesSchool,
  delResourcesSchool,
  addResourcesSchool,
  updateResourcesSchool,
} from "@/api/core/resourcesSchool";
import {
  ResourcesSchoolVO,
  ResourcesSchoolQuery,
  ResourcesSchoolForm,
} from "@/api/core/resourcesSchool/types";
import { listDept } from "@/api/system/dept"; //学校
import { DeptVO } from "@/api/system/dept/types"; //学校
import cityData from '@/assets/json/pca-code.json';
const addRessList = ref(cityData);
const cityProps = reactive({
  emitPath: false,
  value: 'code', //指定选项的值为addresslist对象的code属性
  label: 'name', //指定选项标签为addresslist对象的name属性
  children: 'children' //指定选项的子选项为addresslist对象的children属性
});
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_user_sex } = toRefs<any>(proxy?.useDict("sys_user_sex"));
const { sys_file_type } = toRefs<any>(proxy?.useDict("sys_file_type"));
const resourcesSchoolList = ref<ResourcesSchoolVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const title = ref("");
const formId = ref<string | number>();
const type = ref<string | number>();

const queryFormRef = ref<ElFormInstance>();
const resourcesSchoolFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: "",
});
// 学校
interface DeptOptionsType {
  deptId: number | string;
  deptName: string;
  children: DeptOptionsType[];
}
const deptOptions = ref<DeptOptionsType[]>([]); //学校
//学校改租户数据
import { useTenantlList } from '@/composables/useSchoolList';
const { tenantOptions, fetchTenantlList,tenantDisabled} = useTenantlList();
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const userId = ref(userStore.userId);
const tenantId = ref(userStore.tenantId)

const initFormData: ResourcesSchoolForm = {
  resName: undefined,
  resType: undefined,
  resDesc: undefined,
  areaCode: undefined,
  deptId: undefined,
  content: undefined,
  remark: undefined,
  attach: undefined,
};
const data = reactive<PageData<ResourcesSchoolForm, ResourcesSchoolQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    id: undefined,
    resName: undefined,
    resType: undefined,
    createBy: undefined,
    createTime: undefined,
    params: {},
  },
  rules: {
    resName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
    resType: [{ required: true, message: "类型不能为空", trigger: "change" }],
    resDesc: [{ required: true, message: "说明不能为空", trigger: "blur" }],
    deptId: [{ required: true, message: "学校不能为空", trigger: "change" }],
    content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 取消按钮 */
const cancel = () => {
  reset();
  proxy?.$router.go(-1);
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  resourcesSchoolFormRef.value?.resetFields();
};

const areaCodeChange = (e)=>{
  console.log('地区选择',e)
  //根据地区重新获取学校数据
  fetchTenantlList(e);
  //重置学校数据
  form.value.deptId = undefined;
}

/** 提交按钮 */
const submitForm = () => {
  resourcesSchoolFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      // console.log('提交',form.value);
      // return
      if (formId.value) {
        await updateResourcesSchool(form.value).finally(
          () => (buttonLoading.value = false)
        );
        proxy?.$modal.msgSuccess("编辑成功");
      } else {
        await addResourcesSchool(form.value).finally(() => (buttonLoading.value = false));
        proxy?.$modal.msgSuccess("新增成功");
       
      }
      proxy?.$router.go(-1);
    }
  });
};
/** 查询学校列表 */
const getSchoolList = async () => {
  const res = await listDept();
  const data = proxy?.handleTree<DeptOptionsType>(res.data, "deptId");
  if (data) {
    deptOptions.value = data;
  }
};
/** 获取数据 */
(async () => {
  formId.value = route.query && (route.query.id as string);
  type.value = route.query && (route.query.type as string);
  if (formId.value) {
    const res = await getResourcesSchool(formId.value);
    Object.assign(form.value, res.data);
    title.value = "编辑";
  } else {
    title.value = "新增";
  }
  getSchoolList();
})();
</script>
<style lang="scss" scoped>
.viewBox {
  margin: 15px 15px 80px 15px;
  .title-item {
    display: flex;
    align-items: center;
    height: 24px;
    line-height: 24px;
    font-size: 20px;
    margin: 30px 0 20px;
    span {
      display: inline-block;
      margin: 0 5px;
    }
    .line-box {
      width: 4px;
      height: 24px;
      background: #05afea;
    }
  }
  .topTit {
    margin-top: 10px;
  }
  .el-form-item--default {
    margin: 15px 30px;
  }
  :deep(.el-textarea__inner) {
    width: 300px !important;
  }
  .el-input {
    width: 300px;
  }
  .el-select {
    width: 300px;
  }
  .dialog-footer {
    margin-top: 40px;
    text-align: center;
  }
}

.imgView-box {
  :deep(.el-upload-list--picture-card
      .el-upload-list__item-actions
      .el-upload-list__item-delete) {
    display: none !important;
  }
  :deep(.el-upload--picture-card) {
    display: none !important;
  }

  :deep(.el-upload-list__item.is-success .el-upload-list__item-status-label),
  :deep(.el-icon--close-tip),
  :deep(.el-icon--close) {
    display: none !important;
  }
}
</style>
